<template>
  <div>
    <van-cell-group inset>
      <van-field
        v-model="username"
        name="⽤户名"
        label="⽤户名"
        placeholder="⽤户名"
        :rules="[{ required: true, message: '请填写⽤户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button block type="primary" @click="checkLogin"> 登录 </van-button>
      <div class="link-area"><a @click="register">还没有账号？前往注册 </a></div>
    </div>
  </div>
</template>
<script setup>
//导⼊login接⼝
import { login } from '@/api/login'
import { ref } from 'vue'
import Cookies from 'js-cookie'
import { showNotify,showToast } from 'vant'
import { useRouter } from 'vue-router'
let username = ref()
let password = ref()
const router = useRouter()
const checkLogin = async () => {
  //组装登录数据
  const data = {
    username: username.value,
    password: password.value
  }
  //向服务器发送登录请求
  const res = await login(data)
  console.log(res.data)
  if (res.code > 0) {
    //登录成功，把登录信息保存到cookie中
    Cookies.set('Token', res.data.session_id, { SameSite: 'dev' })
    Cookies.set('username', res.data.username)
    Cookies.set('userid', res.data.id)
    showNotify({
      message: '登录成功',
      type: 'success'
    })
    //跳转到⽤户组件
   
    //this.$router.push('/user')
  }
  router.push('/user')


}
const register = () => {
  router.push('/user/register')
}
</script>
<style lang="scss" scoped>
.link-area {
  margin-top: 15px;
  margin-right: 15px;
  text-align: right;
  font-size: smaller;
  color: #228dff;
  cursor: pointer;
}
</style>
